<template>
  <div class="find-page">
    <van-search
      v-model="value"
      show-action
      style="height: 50px"
      :label="city"
      background="#4fc08d"
      placeholder="请输入小区或地址"
    >
      <!-- 左侧自定义 -->
      <template #left>
        <van-icon
          name="arrow-left"
          @click="$router.push('/')"
          color="#fff"
          style="margin-right: 10px"
        />
      </template>
      <!-- 使用 action 插槽设置右侧自定义右侧按钮的内容 -->
      <template #action>
        <van-icon name="more-o" color="#fff" size="20"  @click="$router.push('/mapHouse')" />
      </template>
    </van-search>
    <!-- 下拉菜单 -->
    <van-sticky :offset-top="0">
      <van-dropdown-menu>
        <van-dropdown-item title="区域" ref="area">
          <van-picker
            show-toolbar
            :columns="areaColumns"
            @confirm="onSubmit"
            @cancel="cancel"
          />
        </van-dropdown-item>
        <van-dropdown-item title="方式" ref="way">
          <van-picker
            show-toolbar
            :columns="wayColumns"
            @confirm="onSubmit"
            @cancel="cancel"
          />
        </van-dropdown-item>
        <van-dropdown-item title="租金" ref="price">
          <van-picker
            show-toolbar
            :columns="priceColumns"
            @confirm="onSubmit"
            @cancel="cancel"
          />
        </van-dropdown-item>
        <van-dropdown-item @open="showPickerF=true" title="筛选" ref="shaixuan"> </van-dropdown-item>
        <van-popup  v-model="showPickerF" position="right" :style="{ height: '100%',width:'70%' }" >
         <div class="popup_zu">
          <dl>
            <dt>户型</dt>
            <dd>
              <span
                type="default"
                v-for="(item, index) in columns.roomColumns"
                :key="index"
                @click="check"
                >{{ item }}</span
              >
            </dd>
            <dt>朝向</dt>
            <dd>
              <span
                type="default"
                v-for="(item, index) in columns.directionColumns"
                :key="index"
                @click="check"
                >{{ item }}</span
              >
            </dd>
            <dt>楼层</dt>
            <dd>
              <span
                type="default"
                v-for="(item, index) in columns.floorColumns"
                :key="index"
                @click="check"
                >{{ item }}</span
              >
            </dd>
            <dt>房屋亮点</dt>
            <dd>
              <span
                type="default"
                v-for="(item, index) in columns.specialColumns"
                :key="index"
                @click="check"
                >{{ item }}</span
              >
            </dd>
          </dl>
          <div class="bottom" >
            <van-button
              type="primary"

              color="#21b97a"
              plain
              style="border: 0"
              @click="cancel"
              >重置</van-button
            >
            <van-button type="primary"  color="#21b97a" @click="onSubmit"
              >提交</van-button
            >
          </div>
         </div>
          </van-popup>
      </van-dropdown-menu>
    </van-sticky>
    <!-- 房屋列表 -->
    <collectItems
      v-for="item in filterHouses"
      :key="item.index"
      :item="item"
    ></collectItems>
  </div>
</template>

<script>
//  rentList,getAreaHouses,
import { getCityToken } from '@/utils/storage'
import {
  getCityInfoByName,
  getFilterHouses,
  getCondition
} from '@/api/house'
import collectItems from '@/components/collectItems.vue'
export default {
  name: 'collect-page',
  components: {
    collectItems
  },
  data () {
    return {
      value: '',
      // list: [],
      cityid: '',
      filterHouses: [],
      wayColumns: [],
      priceColumns: [],
      areaColumns: [
        { text: '', children: [] },
        { text: '', children: [] }
      ],
      showPickerF: false,
      columns: {
        roomColumns: [],
        floorColumns: [],
        directionColumns: [],
        specialColumns: []
      },
      body: {},
      condition: {
        cityid: '',
        area: '',
        subway: '',
        rentType: '',
        price: '',
        more: '',
        roomType: '',
        oriented: '',
        characteristic: '',
        floor: '',
        start: '',
        end: ''
      }
    }
  },
  async created () {
    const res = await getCityInfoByName(getCityToken())
    this.cityid = res.body.value
    // console.log(res)
    // this.list = areaList.body
    // console.log(areaList)
    const { body } = await getFilterHouses({ cityId: this.cityid })
    this.filterHouses = body.list
    // 处理下拉及侧边框的数据
    const ddd = await getCondition(this.cityid)
    console.log(ddd)
    this.body = ddd
    this.getArea(ddd.body)
    console.log(this.areaColumns)
    this.getRentType(ddd.body)
    this.getPrice(ddd.body)
    // 侧边
    ddd.body.roomType.forEach((i) => {
      this.columns.roomColumns.push(i.label)
    })
    ddd.body.floor.forEach((i) => {
      this.columns.floorColumns.push(i.label)
    })
    ddd.body.oriented.forEach((i) => {
      this.columns.directionColumns.push(i.label)
    })
    ddd.body.characteristic.forEach((i) => {
      this.columns.specialColumns.push(i.label)
    })
  },

  computed: {
    city () {
      return getCityToken()
    }
  },
  methods: {
    // 处理地区和地铁数据
    getArea (res) {
      // 第一级
      this.areaColumns[0].text = res.area.label
      this.areaColumns[1].text = res.subway.label
      // value
      // this.areaColumns[0].value = res.area.value
      // this.areaColumns[1].value = res.subway.value
      // 第二级
      res.area.children.forEach(item => {
        if (item.children) {
          this.areaColumns[0].children.push({
            text: item.label,
            value: item.value,
            children: item.children.map(item => {
              return {
                text: item.label,
                value: item.value
              }
            })
          })
        } else {
          this.areaColumns[0].children.push({ text: item.label, value: item.value, children: [{ text: '' }] })
        }
      })
      res.subway.children.forEach(item => {
        if (item.children) {
          this.areaColumns[1].children.push({
            text: item.label,
            value: item.value,
            children: item.children.map(item => {
              return {
                text: item.label,
                value: item.value
              }
            })
          })
        } else {
          this.areaColumns[1].children.push({ text: item.label, value: item.value, children: [{ text: '' }] })
        }
      })
    },
    // 方式
    getRentType (res) {
      res.rentType.forEach(item => {
        this.wayColumns.push({ text: item.label, value: item.value })
      })
    },
    // 租金
    getPrice (res) {
      res.price.forEach(item => {
        this.priceColumns.push({ text: item.label, value: item.value })
      })
    },
    //
    cancel () {
      this.$refs.area.toggle(false)
      this.$refs.way.toggle(false)
      this.$refs.price.toggle(false)
      this.$refs.shaixuan.toggle(false)
    },
    // 提交按钮 获取到的数据转成value
    async onSubmit (v) {
      console.log(v)
      const res = document.querySelectorAll('.active')
      const newArr = Array.from(res)// 把选中的变成真数组
      // console.log(newArr)
      newArr.forEach(Aitem => {
        console.log(1)
        // 朝向
        this.body.oriented.forEach(item => {
          if (item.label === Aitem) {
            item.value = this.condition.oriented
            if (this.condition.oriented === '') {
              this.condition.oriented += item.value
            } else {
              this.condition.oriented += `|${item.value}`
            }
          }
        })
        // 房屋类型
        this.body.roomType.forEach(item => {
          if (item.label === Aitem) {
            item.value = this.condition.roomType
            if (this.condition.roomType === '') {
              this.condition.roomType += item.value
            } else {
              this.condition.roomType += `|${item.value}`
            }
          }
        })
        // 房屋亮点characteristic
        this.body.characteristic.forEach(item => {
          if (item.label === Aitem) {
            item.value = this.condition.characteristic
            if (this.condition.characteristic === '') {
              this.condition.characteristic += item.value
            } else {
              this.condition.characteristic += `|${item.value}`
            }
          }
        })
        // 楼层 floor
        this.body.floor.forEach(item => {
          if (item.label === Aitem) {
            item.value = this.condition.floor
            if (this.condition.floor === '') {
              this.condition.floor += item.value
            } else {
              this.condition.floor += `|${item.value}`
            }
          }
        })
        // 租金
        console.log(v.text)
        this.priceColumns.forEach(item => {
          console.log(item)

          if (v.text === item.text) {
            console.log(v.value)
            this.condition.price = v.value
          }
        })
        // 出租方式
        this.wayColumns.forEach(item => {
          if (v === item.text) {
            this.condition.rentType = item.value
          }
        })
        // 地区
        this.areaColumns[0].children.forEach(item => {
          if (v === item.text) {
            this.condition.area = item.value
          }
        })
        // 地铁
        this.areaColumns[1].children.forEach(item => {
          if (v === item.text) {
            this.condition.subway = item.value
          }
        })
      })
      this.$refs.area.toggle(false)
      this.$refs.way.toggle(false)
      this.$refs.price.toggle(false)
      this.$refs.shaixuan.toggle(false)
      this.showPickerF = false
      const { body: { list } } = await getFilterHouses(this.condition)
      // console.log(list)
      this.filterHouses = list
      this.$toast.success('请求成功')
    },
    // 侧边弹框点击效果
    check (e) {
      // console.log(e.target)

      if (Array.from(e.target.classList).includes('active')) {
        e.target.classList.remove('active')
      } else {
        e.target.classList.add('active')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar__content {
  position: relative;
}
.search {
  position: fixed;
  bottom: 0;
}
.bottom {
  position: sticky;
  bottom: 0;
  margin-top: 80px;
  // display: flex;
  .van-button--normal{

    width: 50%;
  }
}
.active {
  background-color: rgb(174, 231, 177);
}
.popup_zu {
    padding-top: 20px;
    dl{
      padding: 0 20px;
    dt {
      margin: 20px 0;
    }
    dd {
      border-bottom: 1px solid #e5e5e5;
      padding-bottom: 14px;
      margin-left: 30px;
      span {
        display: inline-block;
        height: 32px;
        width: 70px;
        margin: 0 18px 15px 0;
        border: 1px solid #ddd;
        border-radius: 3px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
        // color: #888;
      }
    }
    }
  }
</style>
